<style type="text/css">
	.tabs-container {
		display: flex;
		height: 48px;
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		box-shadow: 0 -1px 1px rgba(0,0,0,.1);
	}
	.tabs-container .tab-item{
		flex: 1;
		display: flex;;
		flex-direction: column;
		color: #666;
		text-align: center;
		font-size: 14px;
		align-items: center;
		justify-content: center;
	}
	.tabs-container .tab-item.active{
		color: red;
	}
	.tab-icon{
		font-size: 24px;
		font-weight: bold;
	}
	.tab-name {
		font-size: 11px;
	}
</style>
<template>
	<div class="tabs-container">
		<div class="tab-item" @click="clickTab(tab.page)" v-for="(tab, index) in tabs" :key="index" :class='{active: index === activeTab }'>
			<span class="tab-icon" :class='[tab.icon]'>
			</span>
			<span class="tab-name">{{tab.name}}</span>
		</div>
	</div>
</template>
<script>
	import utils from '@utils'
	export default {
		name: 'tabs-bar',
		props: {
			activeTab: {
				default: 0
			}
		},
		data() {
			return {
				tabs: [
					{
						name: '首页',
						icon: 'icon-home',
						page: 'index.html'
					},
					{
						name: '分类',
						icon: 'icon-category',
						page: 'category.html'

					},
					{
						name: '购物车',
						icon: 'icon-cart',
						page: 'cart.html'

					},
					{
						name: '个人',
						icon: 'icon-person_center',
						page: 'person_center.html'
					}
				]
			}
		},
		methods: {
			clickTab(pageName) {
				utils.goToPage(pageName);
			}
		}
	}
</script>